<template>
  <view class="bg-gray-100 h-[100vh]">
    <view class="bg-[url('@/static/image/mine/bgColor.png')] h-[300rpx] relative">
      <view class="text-white flex items-center justify-between pt-[28rpx]" @tap="routerPath">
        <view class="ml-4">
          <u-image :src="userHead" height="120rpx" shape="circle" width="120rpx" />
        </view>
        <view class="flex-1 ml-2">
          <text class="text-lg">{{ user.userNickname }}</text>
          <text class="text-yellow-400 text-sm ml-2">( 普通会员 )</text>
          <view class="text-sm">{{ user.userPhone }}</view>
        </view>
        <view class="account-management">
          <view class="text-white text-xs opacity-100">账户管理</view>
        </view>
      </view>
      <view class="integral">
        <view class="integral-content">
          <view class="text-sm text-[#FFC200] font-bold">会员积分：1568</view>
          <view class="rounded-2xl bg-[#FFC200] text-white w-20 h-7 flex items-center justify-center text-sm">
            点击兑换
          </view>
        </view>
      </view>
    </view>

    <view class="p-[20rpx]">
      <view class="text-[#0064FF] mt-[10rpx] text-sm">会员卡</view>
      <transition-group class="cards h-[430rpx] block" name="card-transition" tag="view">
        <view
          v-for="(item, index) in cards"
          :key="index"
          :style="{
            backgroundImage: ` url(${urlTobase64('cardPurchasePicture', item.image)})`,
            top: `${index * 100}rpx`,
            zIndex: index
          }"
          class="rounded-2xl p-2 cardPurchasePicture"
          @tap="handleCardClick(index)"
        >
          <text class="font-bold text-white line-clamp-1 text-sm">
            {{ item.name }}
          </text>

          <view class="flex items-center justify-between mt-[28rpx]">
            <view class="text-white">
              ￥
              <text class="font-bold text-[64rpx]">
                {{ item.price }}
              </text>
            </view>
            <u-button :custom-style="{ 'box-shadow': '0rpx 0rpx 20rpx 2rpx #806FBE' }" shape="circle" type="warning">
              立即购买
            </u-button>
          </view>
        </view>
      </transition-group>
    </view>

    <!--优惠卷-->
    <view class="p-[20rpx] mt-6">
      <view class="text-[#0064FF] mt-[50rpx] text-sm">优惠卷</view>
      <view v-for="(item, index) in discountCouponList" :key="index" class="discountCoupon">
        <view class="font-bold text-[#FF9C4B] w-[180rpx]">
          <text>￥</text>
          <text class="text-2xl">
            {{ item.price }}
          </text>
        </view>

        <view class="flex-1 pl-[28rpx] border-l border-[#E2E2EB]">
          <view class="text-sm text-[#171726] font-bold">
            {{ item.rule }}
          </view>
          <view class="text-xs text-[#696975]">
            {{ item.time }}
          </view>
        </view>
        <view :class="`status-${item.status}`" class="text-xs self-start">
          {{ COUPON_TYPES_STATUS[item.status] }}
        </view>
      </view>
    </view>

    <!--客服-->
    <view class="flex items-center justify-center mt-[10rpx] pb-[20rpx]">
      <view class="service">
        <u-image height="24rpx" src="@/static/image/mine/service.png" width="24rpx" />
        <text class="ml-2">我的客服</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { COUPON_TYPES_STATUS } from '@/constants/base';
import { urlTobase64 } from '@/utils/common'; // 购卡数组
import { useUserStore } from '@/stores/user';

const { user } = storeToRefs(useUserStore());
const userHead = computed(() => {
  const picture = JSON.parse(user.value.userHead || '[]');
  console.log(picture);
  if (picture.length) {
    return picture[0].path;
  } else {
    return '';
  }
});
// 购卡数组
const cards = ref([
  {
    name: '青少年新人20次攀岩课',
    price: '100.00',
    image: 'cardPurchasePicture-0'
  },
  {
    name: '青少年新人20次攀岩课',
    price: '1500.00',
    image: 'cardPurchasePicture-1'
  },
  {
    name: '皮划艇次卡',
    price: '4900.00',
    image: 'cardPurchasePicture-2'
  },
  {
    name: '皮划艇10次卡',
    price: '4900.00',
    image: 'cardPurchasePicture-3'
  }
]);

const discountCouponList = ref([
  {
    price: '10',
    rule: '满100减10',
    time: '2023-11-12至2024-01-01',
    status: 0
  },
  {
    price: '60',
    rule: '满100减10',
    time: '2023-11-12至2024-01-01',
    status: 1
  },
  {
    price: '100',
    rule: '满100减10',
    time: '2023-11-12至2024-01-01',
    status: 2
  }
]);

const handleCardClick = (index) => {
  cards.value.push(cards.value.splice(index, 1)[0]);
};

const routerPath = () => {
  uni.$u.route({
    url: '/pages/login/login'
  });
};
</script>

<style lang="scss" scoped>
.account-management {
  @apply w-[160rpx] h-[56rpx] rounded-l-3xl  bg-[rgb(255,255,255,0.5)] flex items-center justify-center;
}

.cards {
  position: relative;
  padding: 0;

  .cardPurchasePicture {
    padding: 48rpx 40rpx;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    border-radius: 30px;
    transform-origin: 0 0;
    transition: transform 0.3s ease-in-out;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    user-select: none;
    width: 100%;
  }
}

.integral {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 24rpx;

  .integral-content {
    @apply bg-[#696975] mt-6 rounded pl-6 pr-6 pt-[36rpx] flex items-center justify-between pb-[26rpx];
  }
}

.discountCoupon {
  @apply mt-[20rpx] flex items-center justify-between border border-dashed;
  padding: 22rpx 28rpx;
  $statusColorList: (
    0: #0fdb99,
    1: #ff9c4b,
    2: #e2e2eb
  );
  @each $key, $value in $statusColorList {
    .status-#{$key} {
      color: $value;
    }
  }
}

.service {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
  @apply w-[240rpx] h-8 rounded-[32rpx] text-[#696975] text-sm;
}

.card-transition-enter-active,
.card-transition-leave-active {
  transition: all 0.3s;
}

.card-transition-enter,
.card-transition-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
